<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类属性</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
      <!--mydiv1 是data的属性，可以设置成true或者false  可以通过f12来看class属性是否设置-->
      <div :class="{ mydiv1: isActive }">{{msg}}</div>
      <!--类属性  可以设置成对象的形式，也可以设置成单个属性的形式  修改的话app.classObj.mydiv2-->
       <div v-bind:class="classObj">{{msg}}</div>
      <!--v-bind和：表示内容一样--->
  </div>

<script>
    var app =new Vue({
      el:"#app",
        data: {
             msg:'hello world',
            isActive:true,
            classObj:{
                mydiv2: true,
                mydiv: false,
            }

        },

    });

</script>
  <style>
      .mydiv2{
          border:1px solid #dedede;
      }
      .mydiv1{
          font-size: 30px;
      }
      .mydiv {
          font-weight: bold;
          color: #ff0000;
      }
  </style>
</body>
</html>